<template>
  <ElementDialog ref="dialog" embed height="80vh" width="80%" show-full-screen :visible="visible" title="选择资产清单">
    <TableView
        ref="tableView"
        :table-attrs="{ api: getInventoryTaskAssetPage,
                    payloadStyle: 'body',
                    pageSize: 10,
                    descs: ['amount'],
                    dicOptions: [
                      { prop: 'status', dicType: 'inventory_task_asset_status' },
                      { prop: 'assetStatus', dicType: 'asset_status' }
                    ] }"
        :tree-listeners="{ 'node-click': onNodeClick }"
        :tree-attrs="{
      fetchApi: fetchTree,
      show: true,
      treeProps: { label: 'name', value: 'id' },
      'expand-first-node': true,
      lazy: false,
      customRootNode: { name: '全部', id: -1 }
    }"
        :search-model="searchForm"
        :delete-api="batchDelete"
        :toolbar-attrs="{ buttons: ['slot', { del: '', create: '' }] }">
      <template #toolbar-button="{ selectedRows }">
        <!-- 自定义按钮 -->
      </template>
      <template #columns>
        <TableColumn label="资产状态" prop="assetStatus" width="70"/>
        <TableColumn label="资产名称" prop="name"/>
        <TableColumn label="资产编码" prop="number"/>
        <TableColumn label="资产类型" prop="ctiName"/>
        <TableColumn label="规格型号" prop="model"/>
        <TableColumn label="计量单位" prop="unit"/>
        <TableColumn label="金额" prop="amount"/>
        <TableColumn label="使用人" prop="useName"/>
        <TableColumn label="存放地点" prop="location"/>
      </template>
      <template #search-form>
        <FormSelect v-model="searchForm.assetStatus" dict-type="asset_status" label="资产状态" prop="assetStatus" style="width: 220px;"  />
        <FormInput v-model="searchForm.name" label="资产名称" prop="name"  style="width: 220px;" />
        <FormInput v-model="searchForm.number" label="资产编码"  prop="number" style="width: 220px;" />
        <FormInput v-model="searchForm.ctiName" label="资产类型"  prop="ctiName" style="width: 220px;" />
        <FormInput v-model="searchForm.model" label="规格型号"  prop="model" style="width: 220px;" />
        <FormInput v-model="searchForm.unit" label="计量单位"  prop="unit" style="width: 220px;" />
        <FormInput v-model="searchForm.useName" label="使用人"  prop="useName" style="width: 220px;" />
      </template>
    </TableView>
    <template #footer>
      <ElButton type="primary" @click="onConfirm">确定</ElButton>
    </template>
  </ElementDialog>
</template>

<script>
import { mapState } from 'vuex'
import {fetchTree} from '@/api/admin/dept'
import { batchDelete, getInventoryTaskAssetPage } from '@/api/inventory/inventorytaskasset'

export default {
  name: 'InventoryTaskAssetSelect',
  props: {
    visible: Boolean,
    workItemId: {
      type: String,
      default: '-1'
    },
    inventoryTaskId: {
      type: String,
      default: '-1'
    }
  },
  data() {
    return {
      searchForm: {
        status: '',
        assetStatus: '',
        name: '',
        number: '',
        ctiName: '',
        model: '',
        unit: '',
        useName: '',
        usedeptId: '',
        inventoryTaskId: this.inventoryTaskId,
        workItemId: this.workItemId,
        associationWorkItem: 'Y',
        description: ''
      }
    }
  },
  computed: {
    ...mapState('user', ['permissions'])
  },
  methods: {
    getInventoryTaskAssetPage,
    batchDelete,
    fetchTree,
    onConfirm(){
      const selectedRows = this.$refs.tableView.selectedRows
      if (!selectedRows.length) {
        this.$message.warning('请选择资产清单！')
      }
      this.$emit('confirm', selectedRows)
      this.$refs.dialog.hide()
    },
    onNodeClick(node){
      this.searchForm.usedeptId = node.id
      this.$refs.tableView.reloadTable()
    },
    reset(){

    }
  }
}
</script>
